{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	.h-200px{height: 200px;}
</style>
{/block}
{block name="body"}
<el-tabs v-model="activeName" class="bg-white px-3">
	<el-tab-pane label="用户信息" name="user"></el-tab-pane>
	<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
	<el-tab-pane label="拓展信息" name="content"></el-tab-pane>
	<el-tab-pane label="套餐" name="package"></el-tab-pane>
</el-tabs>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">
			<div v-show="activeName=='user'" v-if="form.uid">

			  <el-form-item label="UID">
			  	{{form.uid}}
			  </el-form-item>

			  <el-form-item label="用户">
			  	<div class="flex flex-center">
					<el-image
					  	v-if="form.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="form.headimg" 
					    :preview-src-list="[form.headimg]">
					</el-image>
	  				<div class="flex-1">
						{{form.nickname}}
	  				</div>
	  			</div>
			  </el-form-item>

			  <el-form-item label="手机号">
			  	{{form.mobile}}
			  </el-form-item>

			  <el-form-item label="邮箱">
			  	{{form.email}}
			  </el-form-item>

			  <el-form-item>
			  	<el-link :href="'/user/editUser/'+form.uid" type="primary" :underline="false" target="_blank">编辑用户信息</el-link>
			  </el-form-item>

			</div>
			<div v-show="activeName=='user'" v-else="form.uid">
			  <el-form-item label="手机号" prop="mobile">
			    <el-input v-model="form.mobile" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Mobile" maxlength="11"></el-input>
			  </el-form-item>

			  <el-form-item label="邮箱" prop="email">
			    <el-input v-model="form.email" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Email"></el-input>
			  </el-form-item>

			  <el-form-item label="密码" prop="password">
			    <el-input v-model="form.password" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Password" maxlength="20"></el-input>
			  </el-form-item>
			</div>
			<div v-show="activeName=='basic'">
			  <el-form-item label="企业名称" prop="title">
			    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="30" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="企业简称" prop="stitle">
			    <el-input v-model="form.stitle" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Stitle" maxlength="20" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="企业认证" prop="attestation">
			    <el-radio-group v-model="form.attestation">
			      <el-radio v-for="v in attestation" :label="v.value">{{v.title}}</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="营业执照" prop="business_license">
				  <el-image
				  	v-if="business_license" 
				  	class="w-200px h-200px"
				    :src="business_license"
				    :preview-src-list="[business_license]"
				    fit="scale-down">
				  </el-image>
			  	  <el-upload
					  class="avatar-uploader"
					  action="/uploadFiles"
					  name="file"
					  accept="image/*"
					  :data="{path:'company/business_license'}"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :on-error="handleAvatarError">
			  			<el-button size="small" type="primary">选择文件</el-button>
				  </el-upload>
			  </el-form-item>

			  <el-form-item label="企业LOGO" prop="logo">
				  <el-image
				  	v-if="logo" 
				  	class="w-200px h-200px"
				    :src="logo" 
				    :preview-src-list="[logo]"
				    fit="scale-down">
				  </el-image>
			  	  <el-upload
					  class="avatar-uploader"
					  action="/uploadFiles"
					  name="file"
					  accept="image/*"
					  :data="{path:'company/logo'}"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :on-error="handleAvatarError">
			  			<el-button size="small" type="primary">选择文件</el-button>
				  </el-upload>
			  </el-form-item>

			  <el-form-item label="企业性质" prop="nature">
			    <el-radio-group v-model="form.nature">
			      <el-radio v-for="v in nature" :label="v.value">{{v.title}}</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="融资阶段" prop="finance">
			    <el-radio-group v-model="form.finance">
			      <el-radio v-for="v in finance" :label="v.value">{{v.title}}</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="所属行业" prop="industry_id">
			  	<el-select v-model="form.industry_id" filterable clearable default-first-option placeholder="请选择">
				    <el-option
				      v-for="item in industry"
				      :key="item.id"
				      :label="item.title"
				      :value="item.id">
				    </el-option>
				</el-select>
			  </el-form-item>

			  <el-form-item label="公司规模" prop="size_type">
			    <el-radio-group v-model="form.size_type">
			      <el-radio v-for="v in size_type" :label="v.value">{{v.title}}</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="注册资金" prop="registered_capital">
			    <el-input v-model.number="form.registered_capital" class="col-5 col-sm-1 pl-0 pr-0">
				    <template slot="append">万</template>
			    </el-input>
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.registered_capital_type">
			      <el-radio :label="0">人民币</el-radio>
			      <el-radio :label="1">美元</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="企业福利" prop="corporate_welfare">
			  	<el-select v-model="form.corporate_welfare" filterable multiple default-first-option :multiple-limit="6" placeholder="请选择">
				    <el-option
				      v-for="item in corporate_welfare"
				      :key="item.value"
				      :label="item.title"
				      :value="item.value">
				    </el-option>
				  </el-select>
			  </el-form-item>

			</div>
			<div v-show="activeName=='content'">
			  <el-form-item label="企业联系人" prop="contacts">
			    <el-input v-model="form.contacts" class="col-12 col-sm-1 pl-0 pr-0"></el-input>
			  </el-form-item>
			  <el-form-item label="手机号码" prop="contacts_mobile">
			    <el-input v-model="form.contacts_mobile" class="col-12 col-sm-2 pl-0 pr-0" maxlength="11"></el-input>
			  </el-form-item>
			  <el-form-item label="固定电话" prop="contacts_tel">
			  	<div class="flex">
			  		<div>
			    		<el-input v-model="tel.area_code" class="w-100px" maxlength="4"></el-input>
			  		</div>
			  		<div class="px-1">-</div>
			  		<div>
			    		<el-input v-model="tel.number" class="w-200px" maxlength="8"></el-input>
			  		</div>
			  		<div class="px-1">-</div>
			  		<div>
			    		<el-input v-model="tel.extension" class="w-100px" maxlength="6"></el-input>
			  		</div>
			  	</div>
			  </el-form-item>
			  <el-form-item label="联系邮箱" prop="contacts_email">
			    <el-input v-model="form.contacts_email" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
			  </el-form-item>
			  <el-form-item label="公司地址" prop="contacts_area">
			    <el-cascader 
			    	v-model="form.contacts_area"
			    	placeholder="试试搜索：北京"
			    	filterable
					:props="defaultProps"
			    	:options="arealist"
			    	class="w-50">
			    </el-cascader>
			  </el-form-item>
			  <el-form-item label="详细地址" prop="contacts_address">
			    <el-input v-model="form.contacts_address" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
			  </el-form-item>
			  <el-form-item v-if="amapConfig.status && amapConfig.js_status">
			  	<div id="map_container" style="width: 50%;height: 500px;"></div>
			  </el-form-item>
			  <el-form-item label="公司网址" prop="company_website">
			    <el-input v-model="form.company_website" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
			  </el-form-item>
			  <el-form-item label="公司简介" prop="company_introduction">
			    <el-input type="textarea" v-model="form.company_introduction" :autosize="{ minRows: 2, maxRows: 20}" class="col-12 col-sm-3 pl-0 pr-0" maxlength="200" show-word-limit></el-input>
			  </el-form-item>
			  <el-form-item label="公司介绍" prop="company_descript">
			    <el-input v-model="form.company_descript" type="textarea":autosize="{ minRows: 4, maxRows: 50}" maxlength="2000" show-word-limit class="col-12 col-sm-4 pl-0 pr-0"></el-input>
			  </el-form-item>
			  <el-form-item label="企业模板" prop="template_id">
			    <el-input v-model="form.template_id" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
			  </el-form-item>
			</div>
			<div v-show="activeName=='package'">
			  <el-form-item label="当前套餐">
			    <span v-for="(v,index) in vip" v-if="v.level===form.company_vip_level&&v.is_company">{{v.title}}</span>
			  </el-form-item>
			  <el-form-item label="赠送套餐">
			  	<el-radio-group v-model="form.vip_level">
				    <el-radio v-for="(v,index) in vip" :label="v.level" v-if="v.level>0&&v.is_company">{{v.title}}</el-radio>
				</el-radio-group>
			  </el-form-item>
			</div>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
<div style="display: none;">
	<div ref="infoWindow">
		<div class="flex">
			<div v-if="logo" class="pr-2">
				<img :src="logo" height="60" width="60">
			</div>
			<div>
				<div class="h6">{{form.title}}</div>
				<div class="text-secondary small">{{form.contacts_tel}}</div>
				<div class="text-secondary small">{{getAreaText(form.contacts_area)}}{{form.contacts_address}}</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var amapConfig={
		status:{:config('xy_map.status')},
		server_status:{:config('xy_map.server_status')},
		js_status:{:config('xy_map.js_status')},
		js_key:'{:config('xy_map.js_key')}',
	};
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="arealist"}
	var arealist=[];
	{else/}
	var arealist={:json_encode($arealist,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="attestation"}
	var attestation=[];
	{else/}
	var attestation={:json_encode($attestation,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="nature"}
	var nature=[];
	{else/}
	var nature={:json_encode($nature,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="finance"}
	var finance=[];
	{else/}
	var finance={:json_encode($finance,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="industry"}
	var industry=[];
	{else/}
	var industry={:json_encode($industry,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="size_type"}
	var size_type=[];
	{else/}
	var size_type={:json_encode($size_type,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="corporate_welfare"}
	var corporate_welfare=[];
	{else/}
	var corporate_welfare={:json_encode($corporate_welfare,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/company/addCompany';
	var is_edit=false;
	var formData={
				mobile:'',
				password:'',
				title:'',
				stitle:'',
				business_license:'',
				logo:'',
				attestation:'',
				nature:'',
				finance:'',
				industry_id:'',
				region_id:'',
				size_type:'',
				registered_capital:'',
				registered_capital_type:'',
				corporate_welfare:[],
				contacts:'',
				contacts_mobile:'',
				contacts_tel:'',
				contacts_email:'',
				contacts_area:[],
				contacts_address:'',
				company_website:'',
				company_introduction:'',
				company_descript:'',
				template_id:'',
				vip_level:0,
				vip_time:'',
			};
		var tel={
				area_code:'',
				number:'',
				extension:'',
			};
	var business_license='',logo='';
	{else/}
	var url='/company/editCompany/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var business_license='',logo='';
	if (formData.business_license)
		business_license='{:config('web.imgurl')}'+formData.business_license;
	if (formData.logo)
		logo='{:config('web.imgurl')}'+formData.logo;
	if (formData.contacts_tel) {
		var telArr=formData.contacts_tel.split('-');
		var tel={
				area_code:telArr[0],
				number:telArr[1],
				extension:telArr[2]?telArr[2]:'',
			};
	}else{
		var tel={
				area_code:'',
				number:'',
				extension:'',
			};
	}
	{/empty}
</script>
<script type="text/javascript">
	var map=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			activeName:'user',
			vip:vip,
			amapConfig:amapConfig,
			business_license:business_license,
			logo:logo,
			arealist:arealist,
			attestation:attestation,
			nature:nature,
			finance:finance,
			industry:industry,
			size_type:size_type,
			corporate_welfare:corporate_welfare,
			form:formData,
			is_edit:is_edit,
			tel:tel,
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	        },
	        rules: {
	          mobile: [
	            { required: true, message: '请输入用户手机号', trigger: 'blur' },
	          ],
	          title: [
	            { required: true, message: '请输入企业名称', trigger: 'blur' },
	          ],
	          attestation: [
	            { required: true, message: '请选择企业认证状态', trigger: 'blur' },
	          ],
	          nature: [
	            { required: true, message: '请选择企业性质', trigger: 'blur' },
	          ],
	          finance: [
	            { required: true, message: '请选择融资阶段', trigger: 'blur' },
	          ],
	          industry_id: [
	            { required: true, message: '请选择行业', trigger: 'blur' },
	          ],
	          size_type: [
	            { required: true, message: '请选择公司规模', trigger: 'blur' },
	          ],
	          registered_capital: [
	            { required: true, message: '请输入注册资金', trigger: 'blur' },
	          ],
	          contacts: [
	            { required: true, message: '请输入联系人', trigger: 'blur' },
	          ],
	          contacts_mobile: [
	            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
	          ],
	          contacts_area: [
	            { required: true, message: '请选择公司地址', trigger: 'blur' },
	          ],
	          contacts_address: [
	            { required: true, message: '请输入公司地址', trigger: 'blur' },
	          ],
	          company_descript: [
	            { required: true, message: '请输入公司介绍', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    tel:{
				handler(val,oldVal){
					if (val.area_code && val.number) {
						this.form.contacts_tel=val.area_code+'-'+val.number;
						if (val.extension) 
							this.form.contacts_tel=val.area_code+'-'+val.number+'-'+val.extension
					}else{
						this.form.contacts_tel='';
					}
				},
				deep:true
			},
		    activeName(val,oldVal){
		    	if (val==='content')
		    		setTimeout("initAmap();",300)
		    },
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			getAreaText(area) {
				var areaText='';
				for (var i = 0; i < this.arealist.length; i++) {
					if (area[0]===this.arealist[i].id) {
						areaText=areaText+this.arealist[i].title;
						for (var j = 0; j < this.arealist[i].data.length; j++) {
							if (area[1]===this.arealist[i].data[j].id) {
								areaText=areaText+this.arealist[i].data[j].title;
								for (var n = 0; n < this.arealist[i].data[j].data.length; n++) {
									
									if (area[2]===this.arealist[i].data[j].data[n].id)
									areaText=areaText+this.arealist[i].data[j].data[n].title;
								}
							}
						}
					}
				}
				return areaText;
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'company/business_license'){
							this.form.business_license=res.data.path;
							this.business_license=res.data.url;
						}else if(res.data.type == 'company/logo'){
							this.form.logo=res.data.path;
							this.logo=res.data.url;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.business_license=business_license;
				this.logo=logo;
				this.tel=tel;
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
if (amapConfig.status && amapConfig.js_status && amapConfig.js_key) {
	var jsapi = document.createElement('script');
	jsapi.charset = 'utf-8';
	jsapi.src = '//webapi.amap.com/maps?v=2.0&key='+amapConfig.js_key;
	document.head.appendChild(jsapi);
}
function initAmap() {
	if (map!==null)return;
	var param={
               resizeEnable: true,
               zoom:15
            };
        if (vm.form.contacts_lng && vm.form.contacts_lat)
        	param.center=[parseFloat(vm.form.contacts_lng),parseFloat(vm.form.contacts_lat)];
    map = new AMap.Map('map_container', param);
    if (vm.form.contacts_lng && vm.form.contacts_lat)
    	setInfoWindow([parseFloat(vm.form.contacts_lng),parseFloat(vm.form.contacts_lat)]);
    AMap.plugin('AMap.Geolocation',function(){
        var Geolocation = new AMap.Geolocation();
        map.addControl(Geolocation);
    });
    map.on('click',function(ev) {
    	var lnglat=[ev.lnglat.KL,ev.lnglat.kT];
    	vm.form.contacts_lng=ev.lnglat.KL;
    	vm.form.contacts_lat=ev.lnglat.kT;
    	setInfoWindow(lnglat);
    })
}
function setInfoWindow(lnglat) {
    infoWindow = new AMap.InfoWindow({
        content: vm.$refs.infoWindow  //使用默认信息窗体框样式，显示信息内容
    });
    infoWindow.open(map, lnglat);
    AMap.Event.addListener(infoWindow, 'close', infoWindowClose)
}
function infoWindowClose() {
	vm.form.contacts_lng='';
	vm.form.contacts_lat='';
}
</script>
{/block}